<h5 class="my-3">开发方式</h5>
<ul>
  <li>模块化、包管理  CommonJS 导入导出   npm yarn 包管理器</li>
  <li>组件化、自动化 angular  react  vue</li>
  <li>自动化	各大框架都提供了cli（脚手架），gulp grunt webpack自动化代码压缩及合并（能有效的保护代码）</li>
</ul>
<hr />
<hr />
<h5 class="my-3">前后端分离</h5>
<div class="alert alert-danger">
    前端和后端代码完全分离，前端控制路由，后端负责API(接口)，大大提升了开发效率页面的跳转变得更加流畅，页面的加载速度变得越来越快，局部渲染加载的速度非常快速，页面的模板也可以重复使用。
</div>
<img src="assets/images/pic1.png" />
<hr />
<img src="assets/images/pic2.png" />
<hr />
<hr />
<h5 class="my-3">目前三大前端框架</h5>
<img src="assets/images/pic3.png" />
<div class="alert alert-warning mt-3">
  <p>以游戏打比方，level 1的你进入游戏，vue给你level2的对手，然后level4, 6, 8 逐渐提升。</p>
  <p>而angular是，直接拉你到38级的boss面前，告诉你这就是你以后要面对的，并且讲一大堆，你需要做哪些准备。讲完了，让你现场练级，直接打倒这个boss，从1级瞬间跳到38级。</p>
  <p>而React从头到脚都是javascript代码。</p>
</div>
<hr />
<hr />
<h5 class="my-3">框架选择</h5>
<ul>
  <li>后端：Spring Boot或者其他</li>
  <li>Web端：angular + bootstrap + sass</li>
  <li>移动端：ionic（angular + cordova）混合型APP</li>
  <li>桌面应用：electron + angular </li>
</ul>
<hr />
<hr />
<h5 class="my-3">项目安装</h5>
<img src="assets/images/pic4.png" />
<img src="assets/images/pic5.png" />
<hr />
<hr />
<h5 class="my-3">目录结构</h5>
<img src="assets/images/pic6.png" />
<img src="assets/images/pic7.png" />
<hr />
<hr />
<h5 class="my-3">插件安装</h5>
<div class="alert alert-success my-3">
    <p>npm install bootstrap -S    即    npm install bootstrap --save    写入dependencies</p>
    <p>npm install bootstrap -D    即    npm install bootstrap --save-dev 写入devDependencies</p>
    <p>dependencies与devDependencies有什么区别呢？</p>
    <p>devDependencies 里面的插件只用于开发环境，不用于生产环境</p>
    <p>dependencies 是需要发布到生产环境的</p>
</div>
<img src="assets/images/pic8.png" />
<hr />
<hr />
<h5 class="mb-3">使用命令自动创建组件</h5>
<div>
    ng generate componet header
    简写如下：ng g c header
    详细的其他可选参数，请参考api
    <a target="_blank" href="https://www.angular.cn/cli/generate#component">https://www.angular.cn/cli/generate#component</a>
</div>
<hr />
<hr />
<h5 class="mb-3">两个常用命令：</h5>
<ul>
  <li>npm install（安装或更新依赖）</li>
  <li>npm start（项目启动）</li>
</ul>
<hr />
<hr />




<h5 class="my-3">Angular中的依赖注入特性：</h5>
<ul>
  <li>依赖注入（DI）是一种重要的应用设计模式。 Angular 有自己的 DI 框架，在设计应用时常会用到它，以提升它们的开发效率和模块化程度。</li>
  <li>依赖，是当类需要执行其功能时，所需要的服务或对象。 DI 是一种编码模式，其中的类会从外部源中请求获取依赖，而不是自己创建它们。</li>
  <li>在 Angular 中，DI 框架会在实例化该类时向其提供这个类所声明的依赖项。本指南介绍了 DI 在 Angular 中的工作原理，以及如何借助它来让你的应用更灵活、高效、健壮，以及可测试、可维护。</li>
</ul>
<hr />
<hr />
<h5 class="my-3">选择器的介绍[Component,Directive]</h5>
<ul>
  <li>selector: 'element-name'//自定义标签选择器</li>
  <li>selector: '.class'//样式选择器</li>
  <li>selector: '[attribute]'//属性选择器</li>
  <li>selector: '[attribute=value]'//属性值选择器</li>
  <li>selector: ':not(sub_selector)'//取反选择器</li>
  <li>selector: 'selector1, selector2'//多种选择器</li>
</ul>
<hr />
<hr />
<h5 class="my-3">表单[模板驱动式,响应式]</h5>
<ul>
  <li>FormControl 实例用于追踪单个表单控件的值和验证状态。</li>
  <li>FormGroup 用于追踪一个表单控件组的值和状态。</li>
  <li>FormArray 用于追踪表单控件数组的值和状态。</li>
  <li>ControlValueAccessor 用于在 Angular 的 FormControl 实例和原生 DOM 元素之间创建一个桥梁。</li>
</ul>
<div class="pl-5">
  <p>响应式表单类</p>
  <table class="table table-bordered">
    <tr>
      <td width="200" class="bg-light">AbstractControl</td>
      <td>	所有三种表单控件类（FormControl、FormGroup 和 FormArray）的抽象基类。它提供了一些公共的行为和属性。</td>
    </tr>
    <tr>
      <td class="bg-light">FormControl</td>
      <td>管理单体表单控件的值和有效性状态。它对应于 HTML 的表单控件，比如 input 或 select。</td>
    </tr>
    <tr>
      <td class="bg-light">FormGroup</td>
      <td>管理一组 AbstractControl 实例的值和有效性状态。该组的属性中包括了它的子控件。组件中的顶级表单就是 FormGroup。</td>
    </tr>
    <tr>
      <td class="bg-light">FormArray</td>
      <td>管理一些 AbstractControl 实例数组的值和有效性状态。</td>
    </tr>
    <tr>
      <td class="bg-light">FormBuilder</td>
      <td>一个可注入的服务，提供一些用于提供创建控件实例的工厂方法。</td>
    </tr>
  </table>
  <p>响应式表单指令</p>
  <table class="table table-bordered">
    <tr>
      <td width="200" class="bg-light">FormControlDirective</td>
      <td>把一个独立的 FormControl 实例绑定到表单控件元素。</td>
    </tr>
    <tr>
      <td class="bg-light">FormControlName</td>
      <td>把一个现有 FormGroup 中的 FormControl 实例根据名字绑定到表单控件元素。</td>
    </tr>
    <tr>
      <td class="bg-light">FormGroupDirective</td>
      <td>把一个现有的 FormGroup 实例绑定到 DOM 元素。</td>
    </tr>
    <tr>
      <td class="bg-light">FormGroupName</td>
      <td>把一个内嵌的 FormGroup 实例绑定到一个 DOM 元素。</td>
    </tr>
    <tr>
      <td class="bg-light">FormArrayName</td>
      <td>把一个内嵌的 FormArray 实例绑定到一个 DOM 元素。</td>
    </tr>
  </table>
</div>